<template>
    <div id="nav-menu" class="nav-menu">
        <ul>
            <li v-for="[k, v] of navItems.entries()" :key="k">
                <router-link :to="k">{{ t(`message.${v}`) }}</router-link>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import {useI18n} from 'vue-i18n';

const {t} = useI18n();

const navItems = new Map([
    ['/', 'home'],
    ['/download', 'download'],
    ['/help', 'help'],
    ['/about', 'about']
]);
</script>

<style scoped>
.nav-menu {
    width: 80%;
    margin: 0 auto;
    background-color: #535bf2;
    display: flex;
    justify-content: flex-start;
}

.nav-menu ul {
    margin: 3px 10px;
    list-style: none;
    display: flex;
}

.nav-menu li {
    padding: 0 20px;
    background: white;
    cursor: pointer;
    display: inline-block;
}

.nav-menu li:hover {
    background-color: #f0f0f0;
}

.router-link-active {
    background: #747bff;
    color: #242424;
}
</style>